<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="120px">
      <el-form-item label="大楼" prop="buildingId">
        <el-select class="w100" v-model="formModel.buildingId" placeholder="请选择大楼" autocomplete="off" @change="floorFetch">
          <el-option v-for="item in buildingStore.bildingList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼层" prop="floorId">
        <el-select class="w100" v-model="formModel.floorId" placeholder="请选择楼层" autocomplete="off" @change="roomFetch">
          <el-option v-for="item in floorStore.floorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教室" prop="roomId">
        <el-select class="w100" v-model="formModel.roomId" placeholder="请选择教室" autocomplete="off">
          <el-option v-for="item in roomStore.roomList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input class="w100" v-model.trim="formModel.title" autocomplete="off" placeholder="请输入设备名称"></el-input>
      </el-form-item>

      <el-form-item label="故障类型" prop="faultType">
        <el-select class="w100" v-model="formModel.faultType" placeholder="请选择故障类型" autocomplete="off">
          <el-option v-for="item in workerFaultTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="故障描述" prop="description">
        <el-input v-model.trim="formModel.description" autocomplete="off" placeholder="请输入故障描述"></el-input>
      </el-form-item>
      <el-form-item label="故障状态" prop="status">
        <el-select class="w100" v-model="formModel.status" placeholder="请选择故障状态" autocomplete="off">
          <el-option v-for="item in workerStatusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script setup>
/**
* 文章管理编辑组件
*/
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
import { workerorderParams, workerStatusList, workerFaultTypeList } from '@/apis/model/WorkerorderModel';
import useBuildingStore from '@/stores/useBuildingStore';
import useFloorStore from '@/stores/useFloorStore';
import useRoomStore from '@/stores/useRoomStore';

// ======================================================
//                      变量声明
// ======================================================
const buildingStore = useBuildingStore();
const floorStore = useFloorStore();
const roomStore = useRoomStore();
const value1 = ref('')

// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = getNewObj(workerorderParams());
const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '800px',
})
// 表单组件的引用实例
const formRef = ref(null);
// 加载状态

// 选项数据
// 选项数据
const bildingList = ref([]);
const floorList = ref([]);
const roomList = ref([]);
const workerStatusOption = ref(workerStatusList);
const workerFaultTypeOption = ref(workerFaultTypeList);
// 表单校验规则
const formRules = ref({
  floorId: [{ required: true, trigger: "blur", message: "请选择楼层" }],
  buildingId: [{ required: true, trigger: "blur", message: "请选择大楼" },],
  title: [{ required: true, trigger: "blur", message: "请输入标题" }],
  status: [{ required: true, trigger: "blur", message: "请选择故障状态" },],
  roomId: [{ required: true, trigger: "blur", message: "请选择教室" }],
  faultType: [{ required: true, trigger: "blur", message: "请选择故障类型" }],
})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  console.log('[编辑表单] onSubmit formModel =', formModel.value);
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }

    let param = {
      ...formModel.value,
      floorId: Number(formModel.value.floorId),
      buildingId: Number(formModel.value.buildingId),
      roomId: Number(formModel.value.roomId),
      id: Number(formModel.value.id),
      status: Number(formModel.value.status),
      faultType: Number(formModel.value.faultType),
    }


    EsAjax.post(ApiUrls.workerorderEdit, param).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}


// 点击取消按钮
const onCancel = () => {
  formModel.value = Object.assign({}, formAttrs);
  formRef.value.resetFields();
  dialogInfo.value.visible = false;
}

// ======================================================
//                      处理事件
// ======================================================


// 加载数据
const show = (id, title, item = null, width = '600px') => {
  console.log(id, title, item, width)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;

  if (item) {
    formModel.value = Object.assign({ ...formAttrs }, getNewObj(item));
    formModel.value.faultType = `${formModel.value.faultType}`
    formModel.value.status = `${formModel.value.status}`
    if (`${formModel.value.buildingId}`) {
      floorFetch(formModel.value.buildingId)
    }
    if (`${formModel.value.floorId}`) {
      roomFetch(formModel.value.floorId)
    }
  }

  //加载大楼数据
  buildingStore.getBuildList()

}


// 加载楼层数据
const floorFetch = (e) => {
  floorStore.getFloorList(e)
}
// 加载教室数据
const roomFetch = (e) => {
  roomStore.getRoomList(e)
}


defineExpose({
  show
})
  </script>